<template>
  <div>
    <!-- <p style="margin-top:-50px;margin-bottom:30px;">森林病虫害防治系统</p> -->
    <el-container style="height:100%;">
      <el-aside width="200px">
        <el-menu :default-openeds="['1', '3']" style="height:590px" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-message"></i>森林病虫害防治系统</template>
            <el-submenu index="1-1">
              <template slot="title"
                ><i class="el-icon-message"></i>资料管理</template>
              <el-menu-item index="1-1-1">
                <router-link to="/index/pest">虫害一览</router-link>
              </el-menu-item>
              <el-menu-item index="1-1-2">
                <router-link to="/index/worm">病害一览</router-link>
              </el-menu-item>
              <el-menu-item index="1-1-3">
                <router-link to="/index/mouse">鼠害一览</router-link>
              </el-menu-item>
            </el-submenu>

            <el-submenu index="1-2">
              <template slot="title"
                ><i class="el-icon-message"></i>灾情防治</template>
              <el-menu-item index="1-2-1">
                <router-link to="/index/area">区域一览</router-link>
              </el-menu-item>
              <el-menu-item index="1-2-2">
                <router-link to="/index/classs">小班管理</router-link>
              </el-menu-item>
              <el-menu-item index="1-2-3">
                <router-link to="/index/event">事件记录</router-link>
              </el-menu-item>
            </el-submenu>

            <el-submenu index="1-3">
              <template slot="title"><i class="el-icon-message"></i>专家会商</template>
              <el-menu-item index="1-3-1">
                <router-link to="/index/expert">专家一览</router-link>
                </el-menu-item>
              <el-menu-item index="1-3-2">
                <router-link to="/index/consult">会商灾情</router-link>
                </el-menu-item>
            </el-submenu>

            <el-submenu index="1-4">
              <template slot="title"
                ><i class="el-icon-message"></i>药剂器械管理</template>
              <el-menu-item index="1-4-1">
                <router-link to="/index/medicine">药剂器械管理</router-link>
                </el-menu-item>
              <el-menu-item index="1-4-2">
                <router-link to="/index/out">出库管理</router-link>
                </el-menu-item>
            </el-submenu>

            <el-submenu index="1-5">
              <template slot="title"><i class="el-icon-message"></i>系统信息</template >
              <el-menu-item index="1-5-1">
                <router-link to="/index/user">用户管理</router-link>
                </el-menu-item>
              <el-menu-item index="1-5-2">
                <router-link to="/index/log">日志一览</router-link>
                </el-menu-item>
            </el-submenu>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>查看</el-dropdown-item>
              <el-dropdown-item>新增</el-dropdown-item>
              <el-dropdown-item>删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span>admin</span>
        </el-header>
        <!-- <el-image :src="src" style="width:400px;height:220px;margin-right:80px;margin-left:-50px;margin-bottom: 50px;"></el-image>
             <el-image :src="src2" style="width:400px;height:220px;margin-bottom: 50px;"></el-image>
             <el-image :src="src3" style="width:400px;height:220px;margin-right:80px;margin-left:-50px"></el-image>
             <el-image :src="src4" style="width:400px;height:220px"></el-image> -->

        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>

    <!-- <el-container style=" border: 1px solid rgb(197, 180, 180)">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-menu  :default-openeds="['1', '3']">
        <el-submenu index="1" style=" border: 1px solid rgb(197, 180, 180)">
          <template slot="title"><i class="el-icon-message"></i>森林病虫害防治系统</template>
          <component v-bind:is="currentBizComponent"></component>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-main>
      <div>
          <router-view/>
        </div>
    <el-image :src="src" style="width:400px;height:220px;margin-right:80px;margin-left:-50px;margin-bottom: 50px;"></el-image>
    <el-image :src="src2" style="width:400px;height:220px;margin-bottom: 50px;"></el-image>
    <el-image :src="src3" style="width:400px;height:220px;margin-right:80px;margin-left:-50px"></el-image>
    <el-image :src="src4" style="width:400px;height:220px"></el-image>
    </el-main>
    
  </el-container> -->
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data(){
    return{
        // src: require('./img/2.jpg'),
        // src2: require('./img/3.jpg'),
        // src3: require('./img/4.jpg'),
        // src4: require('./img/5.jpg'),
    }
  }
  // components: {
  // datas,
  // disdster,
  // expert,
  // medicine,
  // system,
  // user,
  // },
  // computed:{
  // ...mapState(["login"]),
  // currentBizComponent:function(){
  //   console.log(this.login);
  //   if(this.login.userGrade=="超级管理员"){
  //     return user;
  //   }
  //   if(this.login.userGrade=="资料管理员"){
  //     return datas;
  //   }
  //   if(this.login.userGrade=="灾情管理员"){
  //     return disdster;
  //   }
  //   if(this.login.userGrade=="专家管理员"){
  //     return expert;
  //   }
  //   if(this.login.userGrade=="库房管理员"){
  //     return medicine;
  //   }
  //   }
  // },
  // 
};
</script>

<style>
.el-container {
  margin-top: -20px;
}
/* p{
  font-size: 13px;
  font-weight: bold;
} */
</style>